<template>
  <div id="home-view" ref="homeRef">
    <Search />
    <HomeSwipe :banner="homeData.banner" />
    <HomeGrid :channel="homeData.channel" />
    <HomeCell
      :couponList="homeData.couponList"
      :style="{ 'margin-bottom': '20px' }"
    />
    <HomePurchase
      :purchaseList="homeData.purchaseList"
      :style="{ 'margin-bottom': '20px' }"
    />
    <HomeBrandList
      :brandList="homeData.brandList"
      :style="{ 'margin-bottom': '20px' }"
    />
    <HomeNewGoodsList
      :newGoodsList="homeData.newGoodsList"
      :style="{ 'margin-bottom': '20px' }"
    />
    <HomeHotGoodsList
      :hotGoodsList="homeData.hotGoodsList"
      :style="{ 'margin-bottom': '20px' }"
    />
    <HomeTopicList
      :topicList="homeData.topicList"
      :style="{ 'margin-bottom': '60px' }"
    />
  </div>
</template>

<script setup>
import Search from "@/components/item/search.vue";
import HomeSwipe from "./HomeSwipe.vue";
import HomeGrid from "./HomeGrid.vue";
import HomeCell from "./HomeCell.vue";
import HomePurchase from "./HomePurchase.vue";
import HomeBrandList from "./HomeBrandList.vue";
import HomeNewGoodsList from "./HomeNewGoodsList.vue";
import HomeHotGoodsList from "./HomeHotGoodsList.vue";
import HomeTopicList from "./HomeTopicList.vue";

import { reactive } from "vue";

import { getHomeData } from "../../server/api";
import { onMounted, ref, onBeforeUnmount } from "vue";

import { usePageStateStore } from "@/stores/usePageStateStore";
import { useRoute } from "vue-router";

let homeData = reactive({
  banner: [],
  channel: [],
  brandList: [], //品牌列表
  newGoodsList: [], //新品列表
  hotGoodsList: [], //热销商品列表
  topicList: [], //专题列表
});

// 页面状态
const inputValue = ref("");
const homeRef = ref(null); // 用于获取滚动位置

const pageStateStore = usePageStateStore();
const route = useRoute();

//挂载完成,获取首页数据
onMounted(async () => {
  try {
    const res = await getHomeData();
    console.log(res);
    homeData.banner = res.data.banner;
    console.log(homeData.banner);
    homeData.channel = res.data.channel;
    homeData.couponList = res.data.couponList;
    homeData.purchaseList = res.data.purchaseList;
    homeData.brandList = res.data.brandList;
    homeData.newGoodsList = res.data.newGoodsList;
    homeData.hotGoodsList = res.data.hotGoodsList;
    homeData.topicList = res.data.topicList;
  } catch (error) {
    console.log(error);
  }
  // 挂载时，从Store恢复状态
  if (route.name === "Home") {
    // 确保是当前页
    console.log("恢复状态");
    const savedState = pageStateStore.homeState;// 获取Store状态
    console.log(savedState);
    inputValue.value = savedState.inputValue;// 恢复输入框内容
    console.log(inputValue.value);
    // 恢复滚动位置
    setTimeout(() => {
      homeRef.value.scrollTop = savedState.scrollTop;// 恢复滚动位置
      console.log(homeRef.value.scrollTop);// 验证滚动位置
    }, 0);
  }
});



// 离开页面前，保存状态到Store
onBeforeUnmount(() => {
  if (route.name === "Home") {
    pageStateStore.saveHomeState({
      inputValue: inputValue.value,
      scrollTop: homeRef.value.scrollTop, // 保存滚动位置
    });
  }
});
</script>

<style scoped lang="scss">
#home-view {
  height: 100%;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #cecece;
}
</style>
